<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动属性</title>

    <style>
        .father{
            width: 620px;
            height: 220px;
            background: pink;
        }

        /*元素一旦浮动不会占据原有的物理位置，会到浮动层*/
        .one{
            width: 200px;
            height: 200px;
            background: purple;
            float: right;
        }

        .two{
            width: 200px;
            height: 200px;
            background: cyan;
            float: right;
        }

        .three{
            width: 200px;
            height: 200px;
            background: tomato;
            float: right;
        }


        /*当行内元素 添加了浮动属性，也就有了块状元素的宽高属性*/
        .one1{
            width: 200px;
            height: 200px;
            background: purple;
            float: left;
        }

        .two1{
            width: 200px;
            height: 200px;
            background: cyan;
            float: left;
        }

        .three1{
            width: 200px;
            height: 200px;
            background: tomato;
            float: left;
        }



    </style>



</head>
<body>

<div class="father">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

<br>

<div class="father">
    <span class="one1">1</span>
    <span class="two1">2</span>
    <span class="three1">3</span>
</div>

</body>
</html>